<!DOCTYPE html>
<html>
<head>
<title>Potential Step Diagram</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f8f9fa;
  }
  canvas {
    background-color: white;
  }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="400"></canvas>
<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');

  // --- Style and Font Settings ---
  // Replicating the hand-drawn style with thick lines and a serif font.
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';
  ctx.lineWidth = 2.5;
  ctx.lineCap = 'butt'; // Sharp ends for lines
  
  const labelFont = 'italic bold 22px serif';
  const valueFont = 'bold 22px serif';
  const textFont = '20px serif';

  // --- Coordinate System Parameters ---
  const originX = 150;
  const originY = 300;
  const axisLenX = 300;
  const axisLenY = 220;
  const arrowSize = 10;
  const v0_y = originY - 140; // Y-coordinate for the potential V₀

  // --- Draw Axes ---
  // Y-axis line
  ctx.beginPath();
  ctx.moveTo(originX, originY + 40);
  ctx.lineTo(originX, originY - axisLenY);
  ctx.stroke();
  // Y-axis arrowhead
  ctx.beginPath();
  ctx.moveTo(originX, originY - axisLenY);
  ctx.lineTo(originX - arrowSize / 2, originY - axisLenY + arrowSize);
  ctx.lineTo(originX + arrowSize / 2, originY - axisLenY + arrowSize);
  ctx.closePath();
  ctx.fill();

  // X-axis line
  ctx.beginPath();
  ctx.moveTo(originX - 100, originY);
  ctx.lineTo(originX + axisLenX, originY);
  ctx.stroke();
  // X-axis arrowhead
  ctx.beginPath();
  ctx.moveTo(originX + axisLenX, originY);
  ctx.lineTo(originX + axisLenX - arrowSize, originY - arrowSize / 2);
  ctx.lineTo(originX + axisLenX - arrowSize, originY + arrowSize / 2);
  ctx.closePath();
  ctx.fill();

  // --- Draw Potential V(x) ---
  ctx.beginPath();
  // Part 1: V(x) = 0 for x < 0 (on the x-axis)
  ctx.moveTo(originX - 100, originY);
  ctx.lineTo(originX, originY);
  // Part 2: V(x) = V₀ for x > 0
  ctx.moveTo(originX, v0_y);
  ctx.lineTo(originX + axisLenX - 50, v0_y);
  ctx.stroke();

  // --- Draw Labels ---
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  
  // Label V(x)
  ctx.font = labelFont;
  ctx.fillText('V(x)', originX + 10, originY - axisLenY - 15);

  // Label x
  ctx.fillText('x', originX + axisLenX + 15, originY);

  // Label 0 at the origin
  ctx.font = valueFont;
  ctx.fillText('0', originX, originY + 20);

  // Label V₀ on the y-axis
  ctx.font = labelFont;
  ctx.textAlign = 'right';
  ctx.fillText('V₀', originX - 15, v0_y);
  
  // --- Draw Figure Caption ---
  ctx.font = textFont;
  ctx.textAlign = 'center';
  ctx.fillStyle = 'black';
  ctx.fillText('Fig. 1.27', canvas.width / 2, canvas.height - 20);

</script>
</body>
</html>